<template>
	<view>
		<view class="empty"></view>

		<view class="user_address">
			<view class="address_box lineb flex_dq">
				<text>发票类型</text>
				<view @click="fpflag=true">{{name}}</view>
			</view>
			<view class="address_box lineb flex_dq">
				<text>抬头类型</text>
				<view class="tab-list-item" v-for="(item,index) in toggleList" :key="index"
					@click="clickToggleHandle(item,index)">
					<view :class="{ active: indexs==index+1}" class="text">{{ item.label }}</view>
				</view>
			</view>
			<view class="address_box lineb flex_dq">
				<text>发票抬头</text>
				<input type="text" v-model.trim="names" placeholder="请输入发票抬头" />
			</view>
			<view class="address_box  flex_dq" v-if="types==2">
				<text>企业税号</text>
				<input type="text" v-model.trim="tax_id" placeholder="请输入纳税人识别号" />
			</view>

			<!-- <view class="address_box  flex_dq">
				<text>详细地址</text>
				<u--textarea v-model="textarea" placeholder="请输入内容"  count   ></u--textarea>
			</view> -->
		</view>
		<view class="user_address">
			<view class="address_box  flex_dq">
				<text>邮箱</text>
				<input type="text" v-model.trim="email" placeholder="请输入邮箱" />
			</view>
		</view>
		<view class="tit" v-if="types==2">
			选填内容(开户银行、银行账号等）
			<view class="flex_dq" @click="show=true" v-if="!show">展开
				<u-icon name="arrow-up"  color="#A6A5AF" size="14"></u-icon>
			  </view>
			<view class="flex_dq" @click="show=false" v-if="show">收起 
				<u-icon name="arrow-down"  color="#A6A5AF" size="14"></u-icon>
			 </view>
		</view>
		<view class="user_address" v-if="show" :class="show ? 'show' : 'hidden'">
			<view class="address_box  flex_dq">
				<text>开户银行</text>
				<input type="text" v-model.trim="bank_name" placeholder="请输入开户银行名称" />
			</view>
			<view class="address_box  flex_dq">
				<text>银行账号</text>
				<input type="number" v-model.trim="bank_account" placeholder="请输入银行账号" />
			</view>
			<view class="address_box  flex_dq">
				<text>企业地址</text>
				<input type="text" v-model.trim="business_address" placeholder="请输入企业地址" />
			</view>
			<view class="address_box  flex_dq">
				<text>企业电话</text>
				<input type="number" v-model.trim="business_phone" placeholder="请输入企业电话" />
			</view>
		</view>
		<u-picker :show="fpflag" :columns="columns" @confirm="confirms"></u-picker>

		<view class="btns flex_c" @click="submit"><text>保存</text></view>

	</view>
</template>

<script>
	import {
		Invoicedetail,
		addInvoice,
		editInvoice
	} from "../../api/other.js";
	export default {
		data() {
			return {
				lableId: "1",
				phone: "",
				name: "增值税电子普通发票",
				names: "",
				detailed: "",
				add: "",
				labelsList: [{
					id: 0,
					name: '家'
				}, {
					id: 1,
					name: '公司'
				}, {
					id: 2,
					name: '其他'
				}, ],
				arealist: [],
				fieldMapping: {
					text: 'name', // 将 name 映射到 label
					value: 'id',
					// 将 code 映射到 value
				},
				province: "",
				city: "",
				county: "",
				Defaultid: "",
				full_location: "",
				flag: false,
				state: "",
				toggleList: [{
						label: '个人',
						type: 1,
						select: true
					}, {
						label: '企业',
						type: 2,
						select: false
					},


				],
				indexs: 1,
				types: 1,
				tax_id: "",
				email: "",
				bank_name: "",
				bank_account: "",
				business_address: "",
				business_phone: "",
				show: false,
				fpflag: false,
				columns: [
					['增值税电子普通发票', '增值税电子专用发票']
				],
			}
		},
		onLoad(e) {
			if (e.state == "modify" && e.id) {
				this.state = e.state
				this.Defaultid = e.id
				this.flag = true
				this.getDefaultaddress()
			}
		},
		methods: {
			confirms(e) {
				this.name = e.value[0]
				this.fpflag = false
				console.log(e, "打印")
			},
			clickToggleHandle(item, index) {
				this.indexs = index + 1
				this.types = item.type
			},
			getDefaultaddress() {
				Invoicedetail({
					id: this.Defaultid
				}).then(res => {
					if (res.data.invoice_type == 1) {
						this.name = "增值税电子普通发票"
					}
					if (res.data.invoice_type == 2) {
						this.name = "增值税电子专用发票"
					}
					this.names = res.data.name
					this.tax_id = res.data.tax_id
					this.email = res.data.email
					this.business_phone = res.data.business_phone
					this.bank_name = res.data.bank_name
					this.bank_account = res.data.bank_account
					this.business_address = res.data.business_address
					this.indexs = res.data.type
					this.types = res.data.type
					console.log(this.full_location)
				})
			},
			submit() {
				if (!this.names) {
					uni.$u.toast("请填写发票抬头")
					return
				}
				if (!this.tax_id && this.types == 2) {
					uni.$u.toast("请填写企业税号")
					return
				}
				if (!uni.$u.test.email(this.email)) {
					uni.$u.toast("请填写正确邮箱")
					return
				}
				if (this.state == "modify" && this.Defaultid) {
					editInvoice({
						invoice_type: this.name == '增值税电子普通发票' ? '1' : '2',
						id: this.Defaultid,
						name: this.names,
						email: this.email,
						tax_id: this.tax_id,
						bank_name: this.bank_name,
						bank_account: this.bank_account,
						business_address: this.business_address,
						business_phone: this.business_phone,
						type: this.types
					}).then(res => {
						if (res.code == 1) {
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
						uni.$u.toast(res.msg)
					})
				} else {
					addInvoice({
						invoice_type: this.name == '增值税电子普通发票' ? '1' : '2',
						name: this.names,
						email: this.email,
						tax_id: this.tax_id,
						bank_name: this.bank_name,
						bank_account: this.bank_account,
						business_address: this.business_address,
						business_phone: this.business_phone,
						type: this.types
					}).then(res => {
						if (res.code == 1) {
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
						uni.$u.toast(res.msg)
					})
				}
			},
		}
	}
</script>
<style scoped lang="scss">
	.user_address {
		width: 690rpx;
		margin: 0 auto;
		background: #fff;
		border-radius: 12rpx;
		margin-top: 20rpx;

		will-change: transform;
		backface-visibility: hidden;
		perspective: 1000px;
	}

	.tit {
		display: flex;
		margin-left: 50rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #666666;
		margin-top: 32rpx;
	}

	@keyframes foldIn {
		from {
			transform: scaleY(0);
			opacity: 0;
		}

		to {
			transform: scaleY(1);
			opacity: 1;
		}
	}

	@keyframes foldOut {
		from {
			transform: scaleY(1);
			opacity: 1;
		}

		to {
			transform: scaleY(0);
			opacity: 0;
		}
	}

	/* 应用动画 */
	.show {
		animation: foldIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		transform-origin: top;
	}

	.hidden {
		animation: foldOut 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		transform-origin: top;
	}

	.tab-list-item {
		position: relative;

		.text {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx;
			opacity: 1;
			font-weight: 500;
			text-align: center;
			font-size: 32rpx;
			color: #A6A5AF;
			z-index: 99;
			position: relative;
			background: #F5F5F5;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin-right: 30rpx;
		}

		.active {

			color: #FFFFFF;
			z-index: 98;
			position: relative;
			background: linear-gradient(270deg, #FA2222 2%, #FFC400 98%);
			border-radius: 10rpx 10rpx 10rpx 10rpx;
		}

		.line {
			width: 66rpx;
			height: 10rpx;
			background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
			border-radius: 118rpx 118rpx 118rpx 118rpx;
			position: absolute;
			top: 70%;
			left: 50%;
			transform: translate(-50%);
			z-index: 60;
		}
	}

	.address_box {
		width: 92%;
		margin: 0 auto;
		padding-top: 40rpx;
		padding-bottom: 20rpx;
	}

	.lineb {
		border-bottom: 1rpx solid #E5E5E5;
	}

	.address_box>text {
		width: 180rpx;
		font-size: 32rpx;
		color: #333333;
		padding: 10rpx 0;
	}

	.address_box>input {
		width: 510rpx;
		padding: 10rpx 0;
		color: #333333;
	}

	.ssq {
		width: 510rpx;
	}

	.user_detail {
		width: 690rpx;
		margin: 30rpx auto;
		background: #fff;
		border-radius: 12rpx;
	}

	.labels {
		flex: 1;
		/* background: pink; */
	}

	.labels>text {
		padding: 6rpx 24rpx;
		border-radius: 26rpx;
		border: 1rpx solid #CCCCCC;
		font-size: 26rpx;
		color: #333333;
		margin-right: 16rpx;
	}

	.user_detail_l {
		width: 92%;
		margin: 0 auto;
		padding-top: 40rpx;
		padding-bottom: 20rpx;
	}

	.user_detail_l>text {
		width: 150rpx;
		font-size: 32rpx;
		color: #333333;
		padding: 10rpx 0;
	}

	.defaults {
		padding: 30rpx 32rpx;
	}

	.defaults_box>text {
		margin-top: 6rpx;
	}

	.active1 {
		background: #65A3FF !important;
		color: #ffffff !important;
		border: 1rpx solid #65A3FF !important;
	}

	.btns {
		width: 690rpx;
		margin: 50rpx auto 0;
	}

	.btns>text {
		text-align: center;
		width: 100%;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}

	.delete {
		width: 690rpx;
		margin: 30rpx auto 0;
	}

	.delete>text {
		text-align: center;
		width: 100%;
		border: 1rpx solid #ff4040;
		color: #ff4040;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}

	/deep/.u-textarea {
		background: none !important;
		border: 1rpx solid #3d3954 !important;
	}

	/deep/.u-textarea__count {
		background: none !important;
	}

	/deep/.input-value-border {
		border: none !important;
	}

	/deep/.placeholder {
		font-size: 30rpx;
	}

	/deep/.uni-data-tree {
		margin-left: -20rpx;
	}

	/deep/.selected-item {
		font-size: 30rpx;
	}
</style>